<template>
    <el-tabs class="main-box demo-tabs" type="border-card">
        <el-tab-pane>
            <template #label>
                <span class="custom-tabs-label">
                    <img class="icon" src="../../../../icons/problem.svg" alt="">
                    <span>算法简介</span>
                </span>
            </template>
            <SetCovProDesPro></SetCovProDesPro>
        </el-tab-pane>
        <el-tab-pane>
            <template #label>
                <span class="custom-tabs-label">
                    <img class="icon" src="../../../../icons/analyse.svg" alt="">
                    <span>算法分析</span>
                </span>
            </template>
            <SetCovAnalAlg></SetCovAnalAlg>
        </el-tab-pane>
        <el-tab-pane>
            <template #label>
                <span class="custom-tabs-label">
                    <img class="icon" src="../../../../icons/demo.svg" alt="">
                    <span>算法演示</span>
                </span>
            </template>
            <SetCovFlash></SetCovFlash>
        </el-tab-pane>
        <el-tab-pane>
            <template #label>
                <span class="custom-tabs-label">
                    <img class="icon" src="../../../../icons/practice.svg" alt="">
                    <span>算法练习</span>
                </span>
            </template>
            <SetCovPractice></SetCovPractice>
        </el-tab-pane>
    </el-tabs>
</template>

<script setup lang="ts">
import SetCovProDesPro from "./components/SetCovProDesPro.vue";
import SetCovAnalAlg from "./components/SetCovProAnalAlg.vue";
import SetCovFlash from "./components/SetCovProFlash.vue";
import SetCovPractice from "./components/SetCovProPractice.vue";
</script>

<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}

.el-main {
    padding: 0;

    .custom-tabs-label {
        display: flex;
        justify-content: center;
        align-items: center;

        .icon {
            width: 22px;
            height: 22px;
            margin-right: 5px;
        }
    }
}

.demo-tabs>.el-tabs__content {
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
</style>